<template>
  <div class="blgc">
    <el-dialog
      title="办理过程"
      top="22vh"
      :visible.sync="visible"
      @close="$emit('update:showblgc', false)"
      :showblgc="showblgc"
      class="lsdhead"
    >
      <div>
        <div class="main">
          <!-- <h3 class="title">办理流程</h3> -->
          <div class="bottom">
            <div class="left">
              <ul v-for="(item, index) in dataList" :key="item.id">
                <!-- <li>
                  <div class="round">初审</div>
                  <div class="link">
                    <img src="@/assets/bllc/link1.png" alt="" />
                  </div>
                </li>
                <li>
                  <div class="round">核验</div>
                  <div class="link">
                    <img src="@/assets/bllc/link1.png" alt="" />
                  </div>
                </li>
                <li>
                  <div class="round">复审</div>
                  <div class="link">
                    <img src="@/assets/bllc/link1.png" alt="" />
                  </div>
                </li> -->
                <li>
                  <!-- <span>复审</span><span>退办</span> -->
                  <div class="round1">
                    <span>{{item.nodeName}}</span>
                  </div>
                  <div class="link" v-if="index + 1 !== dataList.length">
                    <img src="@/assets/bllc/link1.png" alt="" />
                  </div>
                </li>
                <!-- <li>
                  <div class="round">办结</div>
                </li> -->
              </ul>
            </div>
            <div class="right">
              <el-table :data="dataList" :row-style="{ height: '85px' }">
                <el-table-column prop="node" label="办理部门">
                </el-table-column>
                <el-table-column prop="userName" label="办理人"> </el-table-column>
                <el-table-column prop="createTime" label="接收时间">
                </el-table-column>
                <el-table-column prop="completeTime" label="办理时间">
                </el-table-column>
                <el-table-column prop="opinion" label="办理意见">
                </el-table-column>
              </el-table>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
import { getFlowInfo } from "@/api/ywsp/db.js";
export default {
  data() {
    return {
      processInstanceId: "",
      visible: this.showblgc,
      dataList: [],
    };
  },
  async created() {
    this.processInstanceId = this.$route.query.processInstanceId;
    // console.log(this.processInstanceId);
 

    const res = await getFlowInfo({
      processInstanceId: this.processInstanceId,
    });
    // console.log(res);
    this.dataList = res.data.result.filter(item =>{
      return item.type.indexOf('parallelGateway') ==-1
    });
  },
  props: {
    showblgc: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    showblgc() {
      this.visible = this.showblgc;
    },
  },
};
</script>

<style lang="scss" scoped>
.blgc {
  // width: 1190px;
  // height: 650px;
  /deep/ .lsdhead .el-dialog .el-dialog__header {
    height: 42px;
    background: #f4f6f8 !important;
  }
  /deep/.el-dialog__title {
    font-size: 14px;
    color: black;
    font-weight: bold;
  }
  //办理过程
  .main {
    .bottom {
      display: flex;
    }
    .clear {
      clear: both;
    }
    .left {
      // float: left;
      margin-top: 50px;
      ul li .round {
        width: 64px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        border-radius: 100%;
        background-color: #0098ff;
        color: white;
        font-size: 8px;
      }

      ul li .round1 {
        width: 68px;
        height: 68px;
        line-height: 15px;
        display: flex;
        flex-direction: column;
        text-align: center;
        border-radius: 100%;
        background-color: #0098ff;
        color: white;
        font-size: 8px;
        span:nth-child(1) {
          margin-top: 12px;
        }
      }
      ul li {
        margin-bottom: 18px;
      }
      .link {
        position: relative;
        img {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
    .right {
      // float: right;
      width: 900px;
      margin-left: 30px;
    }
    h3 {
      text-align: center;
      margin-bottom: 50px;
    }
    .el-table {
      margin: 0 auto;
      /deep/.el-table--enable-row-transition .el-table__body td {
        height: 40px;
      }
    }
    .el-table .el-table-column {
      height: 80px;
    }
  }
}
</style>